<template>
    <div 
    class="btn-reload"
    >
        <i 
            class="el-icon-refresh icon" 
            :class="{animate: (model || animate)}"
            @click="clickHandler"
        ></i>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            animate: false,
            timer: null,
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    // watch: {
    //     model(val) {
    //         if (!val) {
    //             try{
    //                 clearTimeout(this.timer)
    //             } catch(e) {}
                
    //             this.animate = false;
    //         }
    //     },
    // },
    methods: {
        clickHandler() {
            if (this.model || this.animate) {
                return;
            }

            this.model = true;
            this.animate = true;

            this.setTimer();

            this.$emit('click');
        },
        setTimer() {
            try{
                clearTimeout(this.timer)
            } catch(e) {}

            this.timer = setTimeout(() => {
                this.animate = false;
            }, 1000);
        },
    }
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    @keyframes rotating {
        0% {transform: rotate(0)}
        100% {transform: rotate(-360deg)}
    }

    .btn-reload{
        display: inline-block;

        .icon{
            cursor: pointer;
            transform-origin: center;
            font-size: inherit;
            font-weight: inherit;

            &:hover{
                color: $primaryColor;
            }

            &.animate{
                animation: rotating 1s linear infinite;
            }
        }
    }
</style>